﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../js/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" />
    <link href="../js/lib/ligerUI/skins/Gray2014/css/all.css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>-->
    <script src="../js/lib/ligerUI/js/ligerui.min.js"></script>
    <script src="../js/lib/ligerUI/js/plugins/ligerTree.js"></script>
    <script src="../js/base.js"></script>

    <!-- 先引入 Vue -->
    <script src="../js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="../js/element-ui-index.js"></script>
    <!-- 引入样式 -->
    <link href="../css/element-ui-index.css" rel="stylesheet" />

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>-->
    <!-- 引入样式 -->
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入组件库 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/index.js"></script>-->
    <script src="../js/scripts/func_roles_config.js"></script>
    <title>角色权限</title>
    <style>
        .l-tree a,
        .l-tree span {
            color: #606266;
            font-size: 14px;
        }

        body {
            height: 100%;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
            color: #606266;
        }

        .l-panel .l-toolbar {
            background-color: #FFF !important;
            background: #FFF !important;
        }

        .l-grid-hd-row {
            color: #909399;
            font-weight: 500;
            height: 36px;
            line-height: 36px;
            background-color: #FFF !important;
        }

        .l-grid-header {
            background-color: #FFF !important;
            background: #FFF !important;
        }

        .l-panel-topbar {
            background-color: #FFF !important;
            background: #FFF !important;
        }

        .l-grid-row-alt .l-grid-row-cell {
            background: #FAFAFA !important;
        }

        .l-grid-row {
            color: #606266;
        }

        .l-grid-row-cell-inner {
            line-height: 45px;
        }

        .l-toolbar-item {
            margin-left: 33px;
        }

        .l-panel-btn {
            padding-right: 0px;
            color: #409eff;
        }

        .l-panel-btn-over,
        .l-panel-btn-selected {
            background: none;
            border:;
        }

        body {
            display: block;
            margin: 8px;
        }
    </style>
</head>

<body>
    <div id="app" style="height: 100%;">
        <el-row type="flex">
            <el-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>角色</span>
                      <el-button  @click="saveRoleFunc" style="float: right; padding: 3px 0" type="text">保存</el-button>
                    </div>
                    <el-table
                    ref="singleTable"
                    @row-click="handleCurrentChange"
                    highlight-current-row
                    :data="roleData"
                    border
                    stripe
                    size="mini"
                    style="width: 100%"
                  >
                    <el-table-column type="index"  :index="indexMethod">
                    </el-table-column>
                    <el-table-column
                      prop="ID"
                      show-overflow-tooltip
                      label="ID"
                      width="150"
                    >
                    </el-table-column>
              
                    <el-table-column prop="name" show-overflow-tooltip label="角色名称">
                    </el-table-column>
                  </el-card>
            </el-col>
            <el-col :span="16" style="margin-left: 10px;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>菜单</span>
                    </div>
                    <div id="funTree">
                    </div>
                  </el-card>
            </el-col>
        </el-row>
    </div>
</body>

</html>